<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-06-03 16:35:49
 * @LastEditors: zhangjx
 * @LastEditTime: 2023-06-13 13:57:40
-->
<template>
	<div>
		<el-form :model="formMod" label-position="left" ref="form">
			<el-form-item label="界面字体颜色">
				<el-color-picker v-model="formMod.textColor" show-alpha @change="onChange" />
			</el-form-item>
			<el-form-item label="界面字体主要颜色">
				<el-color-picker v-model="formMod.textActiveColor" show-alpha @change="onChange" />
			</el-form-item>
			<el-form-item label="侧边栏背景">
				<el-color-picker v-model="formMod.asideBackground" show-alpha @change="onChange" />
			</el-form-item>
			<el-form-item label="内容背景色">
				<el-color-picker v-model="formMod.contentBackgroundColor" show-alpha @change="onChange" />
			</el-form-item>
			<el-form-item label="界面背景色">
				<el-color-picker v-model="formMod.backgroundColor" show-alpha @change="onChange" />
			</el-form-item>
			<el-form-item label="">
				<el-button type="primary" @click="onSave">应用</el-button>
				<el-button @click="onClear">重置默认</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useCommonStore } from '@/stores/common'
import { getStore, setStore } from '@/utils/store'
const common = useCommonStore()

const form = ref(null)
const interfaceInfo = getStore('interface-set') || {}

let formMod = ref({
	...interfaceInfo,
})

const onClear = () => {
	setStore('interface-set', '')
	loadPage('重置成功')
}
const onChange = () => {
	setStore('interface-set', formMod.value, 'localstorage')
	common.setBaseColor()
}
const loadPage = (title) => {
	ElMessage.success(title)
	setTimeout(() => {
		window.location.reload()
	}, 1500)
}
const onSave = () => {
	setStore('interface-set', formMod.value, 'localstorage')
	loadPage('设置成功')
}
</script>

<style scoped></style>
